<script setup>
import hotSvg from "@/components/hotSvg.vue"
</script>
<template>
  <div class="hotlist">
    <div class="hot">
      <span class="title">热门推荐</span>
    <span class="info">智绘角色&nbsp;&nbsp;&nbsp;&nbsp;趣享模拟</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="6" :offset="0" class="container" v-for="i in 4" :key="i">
        <el-card shadow="hover">
          <div class="img">
            <img src="@/assets/images/roles.jpg" alt="" class="roles" />
          </div>
          <div class="cardright">
            <h4>绘画大师</h4>
            <p>绘画大师帮助你成就你的会话梦想，让你的梦想闪闪发光</p>
          </div>
          <div class="hotnum">
            <hotSvg />
            <span>1000</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.hotlist {
  padding: 0px 20px;
}
.hotnum {
  position: absolute;
  right:18px;
  top: 0;
  font-size: 14px;
  color:#A1A1A1
}
.container {
  position: relative;
}
.hotlist .title{
  font-size: 30px;
  color: #333;
  font-weight: 400;
}
.hotlist .info {
  margin-left: 40px;
  font-size: 16px;
  color:#A1A1A1
}
.roles {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}
::v-deep .el-card {
  padding: 12px;
  margin-top: 10px;
  background-color: #f4f7ff;
}
.el-card__body {
  display: flex;
}
.cardright {
  display: flex;
  flex-direction: column;
  justify-content: center;
    width: 100%;

}
.cardright h4 {
  font-size: 18px;
  font-weight: 500;
}
.cardright p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78%;
  font-size: 14px;
  color: #9E9E9E;
}
.hot {
  margin-bottom: 12px;
}
</style>